<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.add, .modify{
				width: 500px;
				height: 450px;
				margin: 0 auto;
				background: #FFFFFF;
				border: 2px solid #333333;
				border-radius: 10px;
				padding: 10px 20px;
				position:fixed;
				left:0;
				right:0;
				top:0;
				bottom:0;
				margin:auto;
			}
			.add_ti, .mod_ti{
				width: 50%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			ul li{
				list-style: none;
				
			}
			.pagenation ul{
				display: inline-block;
			}
			.pagenation ul li{
				margin: 0 5px;
				border: 2px solid #0078E7;
				padding: 5px 10px;
				display: inline-block;
				cursor: pointer;
			}
			.active{
				background: #129FEA;
				color: #FFFFFF;
			}
			.box{
				width: 1100px;
				height: 500px;
				margin: 0 auto;
				overflow-y: auto;
			}
			[v-cloak]{
			  display: none;
			}
			.header{
				width: 1100px;
				margin: 0 auto;
				border: 2px solid #333333;
				border-radius: 5px;
			}
			.header span{
				margin-left: 50px;
				padding: 0 20px;
				line-height: 80px;
			}
			.header button{
				margin-left: 200px;
			}
			.header legend{
				padding-left: 12px;
				line-height: 30px;
				width: 99%;
				background: #F1F3F4;
				border-radius: 5px;
			}
			.but{
				width: 1100px;
				margin: 10px auto;
			}
			.pagenation{
				width: 1100px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			.pagenation>div{
				display: inline-block;
			}
			.box table{
				width: 100%;
			}
		</style>
	
	</head>
	<body>
		<div class="app">
			
			<div class="header">
				<form class="pure-form">
				    <fieldset>
				        <legend>查询条件</legend>
						<span>物品名称：</span>
				        <input type="text" v-model="inp">
						<span style="margin-left: 50px;">库存状态：</span>
						<select v-model="sta">
							<option></option>
							<option>充足</option>
							<option>待补货</option>
						</select>
				        <button type="button" class="pure-button pure-button-primary" @click="query">查询</button>
				    </fieldset>
				</form>
			</div>
			
			<div class="but">
				<button class="button-success pure-button" @click="addItem">添加</button>
				<button class="button-error pure-button" @click="modifyItem">修改</button>
				<button class="button-warning pure-button" @click="deleteItem">删除</button>
			</div>
			<div class="box">
				<table class="pure-table pure-table-bordered">
				    <thead>
				        <tr>
				            <th><input type="checkbox" @change="changeAll" v-model="ckAll"/></th>
				            <th>物品id</th>
				            <th>物品名称</th>
				            <th>单价</th>
							<th>单位</th>
							<th>数量</th>
							<th>库存状态</th>
							<th>库存预警</th>
				            <th>创建时间</th>
				            <th>修改时间</th>
				        </tr>
				    </thead>
				
				    <tbody>
				        <tr v-for="(item,index) in list" :key="item.item_id" v-cloak>
				            <td><input type="checkbox" :value="item.item_id" v-model="idzhi"></td>
				            <td>{{ item.item_id }}</td>
				            <td>{{ item.item_name }}</td>
				            <td>{{ item.item_price }}</td>
							<td>{{ item.item_format }}</td>
							<td>{{ item.item_total }}</td>
							<td>{{ item.item_state }}</td>
							<td>{{ item.item_inventory }}</td>
							<td>{{ item.create_time }}</td>
							<td>{{ item.update_time }}</td>
				        </tr>
						<!-- <h3>{{ idzhi }}</h3>
						<h3>{{ abab }}</h3> -->
				    </tbody>
				</table>
			</div>
			
			
			<div class="add" v-show="add_show" v-cloak>
				<form class="pure-form pure-form-stacked">
				    <fieldset>
				        <!-- <legend>添加表单</legend> -->
						<span style="margin: 10px 0 ;">添加表单</span>
						
				        <div class="pure-g">
				            <div class="pure-u-1 pure-u-md-1-3">
				                <label for="first-name">物品名称</label>
				                <input id="first-name" class="pure-u-23-24" type="text" v-model="add_item_name" required>
				            </div>
				
				            <div class="pure-u-1 pure-u-md-1-3">
				                <label for="last-name">单价</label>
				                <input id="last-name" class="pure-u-23-24" type="text" v-model="add_item_price">
				            </div>
							
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">单位</label>
								<input id="last-name" class="pure-u-23-24" type="text" v-model="add_item_format">
							</div>
							
				            <div class="pure-u-1 pure-u-md-1-3">
				            	<label for="last-name">数量</label>
				            	<input id="last-name" class="pure-u-23-24" type="text" v-model="add_item_total">
				            </div>
				
				            <div class="pure-u-1 pure-u-md-1-3">
				                <label for="city">库存警告</label>
				                <input id="city" class="pure-u-23-24" type="text" v-model="add_item_inventory">
				            </div>
							<div class="mod_ti">
								<button class="pure-button" type="button" @click="add_cancel">取消</button>
								<button class="pure-button pure-button-primary" type="button" @click="add_Submit">提交</button>
							</div>
				        </div>
				    </fieldset>
				</form>
				
			</div>
			
			<div class="modify" v-show="mod_show" v-cloak>
				<form class="pure-form pure-form-stacked">
				    <fieldset>
				        <!-- <legend>添加表单</legend> -->
						<span style="margin: 10px 0 ;">修改表单</span>
						
				        <div class="pure-g">
				            <div class="pure-u-1 pure-u-md-1-3">
				                <label for="first-name">物品名称</label>
				                <input id="first-name" class="pure-u-23-24" type="text" v-model="mod_item_name">
				            </div>
				
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">单位：（元）</label>
								<input id="last-name" class="pure-u-23-24" type="text" v-model="mod_item_format">
							</div>
							
				            <div class="pure-u-1 pure-u-md-1-3">
				            	<label for="last-name">数量</label>
				            	<input id="last-name" class="pure-u-23-24" type="text" v-model="mod_item_total">
				            </div>
				
				            <div class="pure-u-1 pure-u-md-1-3">
				                <label for="city">库存警告</label>
				                <input id="city" class="pure-u-23-24" type="text" v-model="mod_item_inventory">
				            </div>
							<div class="add_ti">
								<button class="pure-button" type="button" @click="mod_cancel">取消</button>
								<button class="pure-button pure-button-primary" type="button" @click="mod_Submit">提交</button>
							</div>
				        </div>
				    </fieldset>
				</form>
				
			</div>
			
			<div class="pagenation">
				<div>
					一共有{{ total }}条，显示
					<select v-model="size" @change="changepage">
						<option value="5">5</option>
						<option value="10" selected>10</option>
						<option value="15">15</option>
					</select>
					条
				</div>
				<div>
					<ul>
						<li @click="getCurr(curr ==1 ? 1 : curr-1)">上一页</li>
						<li v-for="item in pagenum"
							@click="getCurr(item)"
							:class="{active : item == curr? true:false }">
							{{ item }}
						</li>
						<li @click="getCurr(curr == pagenum ? pagenum : curr+1)">下一页</li>
					</ul>
				</div>
			</div>
			
			
		</div>
		
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>
